<template>
  <div class="leave">
    <breadcrumb title="请假管理" homePath="/student" />
    <el-card>
      <h1>所有假条</h1>
      <!-- 假条 -->
      <el-table :data="allLeaveData" stripe style="width: 100%" border>
        <template slot="empty">
          <p>{{ emptyText }}</p>
        </template>
        <el-table-column label="申请时间" width="150">
          <template slot-scope="scope">
            {{ scope.row.create_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="申请人" width="120" />
        <el-table-column prop="leavetype" label="申请理由" width="120" />
        <el-table-column prop="reason" label="详细信息" />
        <el-table-column label="离校时间" width="120">
          <template slot-scope="scope">
            {{ scope.row.start_time | dateFormat(1) }}
          </template>
        </el-table-column>
        <el-table-column label="返校时间" width="120">
          <template slot-scope="scope">
            {{ scope.row.end_time | dateFormat(1) }}
          </template>
        </el-table-column>
        <el-table-column label="审核结果" width="120">
          <template slot-scope="scope">
            <p v-if="scope.row.state == 0">未审批</p>
            <p v-if="scope.row.state == 1" style="color: green">审批通过</p>
            <p v-if="scope.row.state == 2" style="color: red">审批未通过</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <!-- {{ scope.row.l_id }} -->
            <el-link
              type="primary"
              style="margin: 0 20px"
              @click.native="commitReq(scope.row.l_id, 1)"
              >同意</el-link
            >
            <el-link type="danger" @click="commitReq(scope.row.l_id, 2)"
              >拒绝</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页栏 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="allLeaveNum"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from "components/Breadcrumb";

import { getLeave } from "network/teacher/getLeave";
import { upLeaveState } from "network/teacher/upLeaveState";

export default {
  name: "Leave",
  components: {
    Breadcrumb,
  },
  data() {
    return {
      emptyText: "",
      allLeaveData: [],
      allLeaveNum: 0,
      queryInfo: {
        currPage: 1,
        pageSize: 2,
      },
      id2usernameMap: {},
    };
  },
  created() {
    this.$store.commit("setCurrentIndex", {
      type: "teacherCurrentIndex",
      index: 2,
    });
    this.getLeave();
  },
  methods: {
    // 获取所有管理班级的请假条
    async getLeave() {
      let { queryInfo } = this;
      queryInfo.token = window.sessionStorage.getItem("token");
      let res = await getLeave(queryInfo);
      this.allLeaveData = res.data;
      this.allLeaveNum = res.total;
      if (res.total == 0) {
        this.emptyText = "暂无数据";
      }
      this.$message.success("获取请假列表成功");
      console.log(this.allLeaveData);
    },
    // 处理改变一页的数量
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getLeave();
    },
    // 处理改变页码
    handleCurrentChange(newPage) {
      this.queryInfo.currPage = newPage;
      this.getLeave();
    },
    // 提交审批
    async commitReq(l_id, upState) {
      let confirmRes = await this.$confirm("确定要提交本次审批吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmRes != "confirm") {
        return this.$message("已取消审批");
      }
      let res = await upLeaveState({ l_id, upState });
      this.$message.success(res);
      this.getLeave();
    },
  },
};
</script>

<style lang="less" scoped>
.leave {
  h1 {
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }
  .el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>